<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>魔方</title>
<style>
	*{
		margin: 0;
		padding: 0;
	}
	.container{
	width: 300px;
	height: 300px;
	margin: 200px auto;
	perspective: 3000px;
	bo rder: 1px solid red;
	}
	.box{
	width: 300px;
	height: 300px;
	transform-style: preserve-3d;
	transform:rotateX(45deg)rotateY(45deg);
	animation: mofang 2s linear infinite;
	}
	@keyframes mofang {
	0%{transform:rotateX(45deg)rotateY(45deg);}
	70%{transform:rotateX(18deg)rotateY(180deg);}
	100%{transform: rotateX(360deg)rotateY(360deg);}
	}
	.page{
	width:300px;
	height: 300px;
	position: absolute;
	}
.page_top{
	background:url(../Project/img/微信图片20250915111019.jpg);
	background- color:#4ee4b2;
	transform:translateZ(150px);
	}
	.page_bottom{
		background: url(../Project/img/114B3075171FDAB6974897971945F45E.jpg);
		background- color: #fbff9e;
		transform:translateZ(-150px);
		}
		.page_left{
		background:url(../Project/img/4F182BA336D5865D5AB11B3E54F53AF3.jpg);
		background- color:#ffcae2;
		transform:translateX(-150px)rotateY(90deg);
		}
		.page_right{
		background:url(../Project/img/6358BFD7BD1769FB02016ABB584A3CF0.jpg);
		background- color: #55ffff;
		transform:translateX(150px)rotateY(90deg);
	}